<template>
  <div class="outside">
    <tabs :labels="labels" @handleClick='handleClick' ref='tabs'></tabs>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import Tabs from 'components/common/tabs/Tabs'
import { request } from 'network/request'
export default {
  name:'Discover',
  components:{
    Tabs
  },
  computed:{
    path(){
      var text = this.$route.path
      var index = text.lastIndexOf('\/')
      var path= text.substring(index+1)
      if(text.indexOf('playlist') !== -1){
        path = 'playlist'
      }
      if(text.indexOf('new') !== -1){
        path = 'latestmusic'
      }
      var name = this.routes.indexOf(path)
      return name+''
    }
  },
  data(){
    return {
      activeName:"1",
      labels:['个性推荐','歌单','排行榜','歌手','最新音乐'],
      routes:['recommend','playlist','list','singer','latestmusic']
    }
  },
  methods:{
    handleClick(tab){
      this.$router.push(`/discover/${this.routes[tab.index]}`)
    }
  },
  mounted(){
    this.$refs.tabs.activeName = this.path
  },
  watch:{
    '$route'(){
      this.$refs.tabs.activeName = this.path
    }
  },
}
</script>

<style scoped>
  
</style>